import { useEffect, useState } from 'react'
import { withRouter } from "react-router-dom";
import proJectService from "../service/project/getproject"
import Header from "../component/header"
import { PlusOutlined } from '@ant-design/icons';
import styles from "../sass/parseresult1.module.scss"
import { Button, Anchor, message } from 'antd';
import ReactQuill from "../component/richFile"
import Modal from 'antd/lib/modal/Modal';
import { setResultValue } from "../reducer/parseResult"
import { useDispatch, useSelector } from 'react-redux';
import parseService from "../service/parseResult/parseResultService"
function Parseresult1(props: any) {
    const dispatch = useDispatch()
    const [projectInfo, setProjectInfo] = useState<any>() //本页报告信息
    const [selectTitle, setSelectTitle] = useState<Array<any>>([]) //左边导航栏内容
    const [parseResult, setparseResult] = useState<any>()//解析结果
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isEditTitle, setIsEditTitle] = useState("")
    const changeContent = useSelector((state: any) => state.ParseResult.changeContent)
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = async () => {
        let values: any = {}
        values[isEditTitle] = changeContent
        if (parseResult[isEditTitle] !== changeContent) {
            const data = {
                period: "first",
                projectId: projectInfo.project_id,
                data: {
                    values
                }
            }
            let res = await parseService.updateResult(data)
            if (res.detail = "更新完成") {
                message.success("更新成功")
            }
            getProjectResult(projectInfo.project_id)
        } else {
        }
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    const getProjectInfo = async (projectId: string) => {
        let data = await proJectService.getProjectInfo({ projectId })

        setProjectInfo(data)
    }
    const getProjectResult = async (projectId: string) => {
        let data = await proJectService.getParseResult({ projectId })
        setparseResult(data)
        let arr: any = []
        Object.keys(data).forEach((item: string, index: number) => {
            if (item != "文件URL") {
                arr.push(item)
            }
        })
        setSelectTitle(arr)
    }

    //window监听滚动事件
    window.addEventListener("scroll", (e) => {
        let top = document.documentElement.scrollTop
        let checkTitle = document.getElementById("checktitle")
        if (top > 140) {
            (checkTitle as HTMLElement).style.position = "fixed"
        } else {
            (checkTitle as HTMLElement).style.position = "static"
        }
    })
    useEffect(() => {
        let projectId = props.match.params.id
        getProjectInfo(projectId)
        getProjectResult(projectId)
    }, [])

    return (
        <div className={styles.page}>
            <Header></Header>
            <div className={styles.title}>
                <span>{projectInfo ? projectInfo.issuer_name : ""}</span>
                <Button type="primary" style={{ borderRadius: "5px", height: "30px" }} onClick={() => {
                    if (parseResult["文件URL"]) {
                        const w = window.open('about:blank');
                        (w as Window).location.href = parseResult["文件URL"]
                    }
                }}>查看原始文档</Button>
            </div>
            <div className={styles.addData}>
                <Button type="primary" icon={<PlusOutlined />} style={{
                    width: "100px", height: "30px", marginBottom: "10px"
                }} onClick={() => {
                    let projectId = props.match.params.id
                    proJectService.prospectusInsert({ projectId })
                }}>数据入库</Button>
            </div>
            <div className={styles.checktitle} id="checktitle">
                <div className={styles.checkbox}>
                    {
                        selectTitle.map((item: string, index: number) => {
                            return <div key={index}
                                onClick={() => {
                                    let anchorElement = document.getElementById(item);
                                    if (anchorElement) { anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' }); }
                                }}
                            >{item}</div>

                        })
                    }</div>
            </div>

            <div className={styles.parseResult}>
                <table><tbody>
                    <tr className={styles.titleHeader}>
                        <td className={styles.titletd}>勾稽关系错误</td>
                        <td className={styles.titletd}>相关科目</td>
                    </tr>
                    <tr className={styles.titleHeader}>
                        <td className={styles.titleData}>{
                            selectTitle.some((item: any) => item === "勾稽关系") ? "" : "暂无数据"}</td>
                    </tr></tbody></table>
                {/* 循环生成解析结果 */}
                {selectTitle.map((item: string, index) => {
                    return <div key={item} className={styles.parseresult}>
                        <div className={styles.resultTitle}>
                            <span className={styles.resultName} id={item}> {item} </span>
                            <Button onClick={
                                () => {
                                    dispatch(setResultValue(parseResult[item]))
                                    showModal()
                                    setIsEditTitle(item)
                                }
                            }>编辑</Button>
                        </div >
                        <div className={styles.parseData} >
                            <div dangerouslySetInnerHTML={{ __html: parseResult[item] }} className={styles.field_content}></div>
                        </div>
                    </div>
                })}
            </div>
            <Modal
                title="编辑"
                okText="确认"
                cancelText="取消"
                destroyOnClose={true}
                visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}
                width={"1000px"}
                bodyStyle={{ minHeight: "500px", width: "1000px" }}>
                < ReactQuill defaultValue={undefined}></ReactQuill>
            </Modal>
        </div>

    )
}
export default withRouter(Parseresult1)